@import '@sealos/shadcn-ui/shadcn.css';
@import '@sealos/shadcn-ui/styles.css';

html {
  font-family: var(--font-geist-sans);
}

/* guide */
#driver-popover-content {
  border: none;
  padding: 0px;
  border-radius: 20px;
  max-width: fit-content;
}

.driver-popover-arrow-side-left {
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-top-color: transparent !important;
  border-left-color: #2563eb !important;
}

.driver-popover-arrow-side-right {
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
  border-top-color: transparent !important;
  border-right-color: #2563eb !important;
}

.driver-popover-arrow-side-top {
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-top-color: #2563eb !important;
}

.driver-popover-arrow-side-bottom {
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: #2563eb !important;
}

/* date picker */
div.rdp-root {
  padding: 12px 16px 8px 16px;
  --rdp-accent-color: black;
  --rdp-background-color: #f4f6f8;
  --rdp-outline: 2px solid var(--rdp-accent-color);
  --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75);
}
button.rdp-button_previous,
button.rdp-button_next {
  & .rdp-chevron {
    transform: scale(0.9);

    & polygon {
      fill: currentColor;
      transform: scale(0.8);
      transform-origin: center;
    }
  }
}
span.rdp-caption_label {
  font-size: 14px;
  font-weight: 500;
  color: #18181b;
}

td.rdp-range_start.rdp-selected.rdp-day {
  & button {
    border-radius: 6px 0px 0px 6px;
    background: #18181b;
  }
}
td.rdp-range_end.rdp-selected.rdp-day {
  & button {
    border-radius: 0px 6px 6px 0px;
    background: #18181b;
  }
}
td.rdp-range_middle.rdp-day {
  & button {
    background: #f4f4f5;
  }
}
td.rdp-selected.rdp-range_start.rdp-range_end {
  & button {
    border-radius: 6px;
    background: #eff6ff;
    border: none;
    color: #2563eb;
  }
}

td.rdp-day {
  width: 34px;
  height: 34px;
  & button {
    font-size: 14px;
    font-weight: 400;
    width: 34px;
    height: 34px;
  }
}
th.rdp-weekday {
  color: #18181b;
  font-size: 12px;
  font-weight: 500;
}
